el

2023-09-11 02:09| 来源: 网络整理| 查看: 265

Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

Select Events 事件名称说明回调参数 change 选中值发生变化时触发目前的选中值 visible-change 下拉框出现/隐藏时触发出现则为 true，隐藏则为 false remove-tag 多选模式下移除tag时触发移除的tag值 clear 可清空的单选模式下用户点击清空按钮时触发 — blur 当 input 失去焦点时触发 (event: Event) focus 当 input 获得焦点时触发 (event: Event)

实例代码：

export default { data() { return { ruleForm: { type: '', status: '', pageIndex: 1, // 当前页码 pageSize: 10 // 当前每页显示条数 }, total: 0, // 记录总数 select1: [ { value: 1, label: '微信' }, { value: 2, label: '支付宝' }, { value: 3, label: '苹果内购' } ], tableData: [] } }, created() { this.getList() }, methods: { // 获取交易流水 async getList() { this.ruleForm.pageIndex = this.ruleForm.pageIndex - 1 let res = await axios.post('/getGoodsList', this.ruleForm) console.log(res) this.tableData = res.data.data.data this.total = res.data.data.total }, // 选中值发生变化时触发 changeValue() { this.ruleForm.pageIndex = 1 this.getList() }, // 点击清空按钮时触发 delValue() { console.log(11) } } }

PS：接口的 pageIndex 字段是从0开始。

【本文地址】

公司简介

联系我们